import React from 'react';
import axios from 'axios';
import DataBox from './dataBox';
import { allpost } from './../../api';

class Tabs extends React.Component {
	constructor(props) {
	  super(props);
	  this.state = {
	  	tabs:[
		  	{
		  		index: 0,
		  		tabsName:'最新帖子',
		  		data:[
	  				
	  			]
		  	},
		  	{
		  		index: 1,
		  		tabsName:'热门帖子',
		  		data:[
	  				{
	  					id: 1,
		  				posttitle: 'hot test title 1',
		  				readnum: 30,
		  				replynum: 10,
		  				createTime: new Date()
	  				},
	  				{
	  					id: 2,
		  				posttitle: '最热标题 2',
		  				readnum: 30,
		  				replynum: 10,
		  				createTime: new Date()
	  				},
	  				{
	  					id: 3,
		  				posttitle: '我们的热标题 3',
		  				readnum: 30,
		  				replynum: 10,
		  				createTime: new Date()
	  				},
	  				{
	  					id: 4,
		  				posttitle: '欢迎来到王者荣耀 4',
		  				readnum: 30,
		  				replynum: 10,
		  				createTime: new Date()
	  				},
	  			],
		  	},
		  	{
		  		index: 2,
		  		tabsName:'精品推荐',
		  		data:[
	  				{
	  					id: 1,
		  				posttitle: 'nice test title 1',
		  				readnum: 30,
		  				replynum: 10,
		  				createTime: new Date()
	  				},
	  				{
	  					id: 2,
		  				posttitle: '精品标题 2',
		  				readnum: 30,
		  				replynum: 10,
		  				createTime: new Date()
	  				},
	  				{
	  					id: 3,
		  				posttitle: '我们的新精品标题 3',
		  				readnum: 30,
		  				replynum: 10,
		  				createTime: new Date()
	  				},
	  				{
	  					id: 4,
		  				posttitle: '欢迎来到王者荣耀 4',
		  				readnum: 30,
		  				replynum: 10,
		  				createTime: new Date()
	  				},
	  			]
		  	}
	  	],
	  	index: 0,
	  	currentdata:null
	  };
	}

	init() {
		allpost().then(res=>{
			let data=res.content;
			let array = this.state.tabs;
			if(data) {
				array[0].data= data.slice(0,10);
				this.setState({
					tabs:array
				});
			}
		})
	}

	componentWillMount() {
		this.init();
	}

	componentWillUnmount() {
		clearInterval(this.timerID);
	}

	handleChange(e) {
		const value = (this.state.index?this.state.index:0)+1;
		this.setState({
			index:value===this.state.tabs.length?0:value,
		});

	}

	componentDidUpdate(prevProps, prevState) {
		
	}

	handleMouseOver(cindex,e) {
		this.setState({
			index:cindex,
		})
	}

	render() {

		return (
			<div className="wpr">
				<div className="tabs">
					<ul className="tab-list">
						{
							this.state.tabs.map(tab=>	
								<li key={tab.index} onMouseOver={this.handleMouseOver.bind(this,tab.index)} className={this.state.index===tab.index?"buttonli cur":"buttonli"}>{tab.tabsName}</li>
							)
						}
					</ul>
					<div className="clear"></div>
					<ul className="tab-box">
						{
							this.state.tabs.map(tab=>
								<li key={tab.index} style={this.state.index===tab.index?{display:"block"}:{display:"none"}}>
									<dl>
										<div className="area">
											<div className="frame-span">
												<DataBox data={tab.data}/>
											</div>
										</div>
									</dl>
								</li>
								)
						}
					</ul>
				</div>
			</div>
		);
	}


}

export default Tabs;